@page "/components/button"

<DocsPage>
    <DocsPageHeader Title="Button" Component="@nameof(MudButton)">
        <Description>The <CodeInline>MudButton</CodeInline> component is a button with material design theme and comes with multiple functions.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        
        <DocsPageSection>
            <SectionHeader Title="Filled Buttons">
                <Description>Filled Buttons have elevation (box shadow) and is raised on click by default.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonFilledExample)">
                <ButtonFilledExample/>
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Drop Shadow">
                        <Description>The drop shadow, sometimes also called elevation, can be controlled with the <CodeInline>DropShadow</CodeInline> bool.<CodeInline>Color</CodeInline> property only applies to the text.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(ButtonDropShadowExample)" ShowCode="false">
                        <ButtonDropShadowExample/>
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Text Buttons">
                <Description>Text Buttons have no drop shadow, background or border and only hover effect is used. The <CodeInline>Color</CodeInline> property only applies to the text.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonTextExample)">
                <ButtonTextExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Outlined Buttons">
                <Description>Outlined Buttons are similar to Text Buttons except for the border that inherits its color from the set <CodeInline>Color</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonOutlinedExample)">
                <ButtonOutlinedExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Size">
                <Description>
                    The default button size is <CodeInline>Size.Medium</CodeInline> and, by default, the icon size uses the button size.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonSizeExample)" ShowCode="false">
                <ButtonSizeExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="FullWidth">
                        <Description>Buttons that have <CodeInline>FullWidth=true</CodeInline> extend to 100% of available width.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(ButtonFullWidthExample)" ShowCode="false">
                        <ButtonFullWidthExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description>
                    You can define an icon for either the start or the end.
                    <br/>
                    Use <CodeInline>IconSize</CodeInline> to set a different icon size.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonIconLabelExample)">
                <ButtonIconLabelExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Customized Buttons">
                <Description></Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Styled Button">
                    </SectionHeader>
                    <SectionContent Code="@nameof(ButtonCustomizedExample)" ShowCode="false">
                        <ButtonCustomizedExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Loading Button">
                    </SectionHeader>
                    <SectionContent Code="@nameof(ButtonLoadingExample)" ShowCode="false">
                        <ButtonLoadingExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Split Button">
                        <Description>A <CodeInline>MudMenu</CodeInline> and <CodeInline>MudButtonGroup</CodeInline> can be used to create a split button.</Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="@nameof(ButtonGroupSplitButtonExample)">
                        <ButtonGroupSplitButtonExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Link Button">
                <Description>Set the <CodeInline>Href</CodeInline> parameter and the MudButton will render an anchor element. If you also set the <CodeInline>Target</CodeInline> parameter to <CodeInline>_blank</CodeInline>, the component will add <CodeInline>rel="noopener"</CodeInline> automatically.
                    If you set the <CodeInline>Disabled</CodeInline> parameter to <CodeInline>true</CodeInline>, the component will render a button with no <CodeInline>href</CodeInline> attribute.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonLinkExample)" ShowCode="false">
                <ButtonLinkExample/>
            </SectionContent>

            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Custom Rel Content">
                        <Description>
                            If you set a non-null string to <CodeInline>Rel</CodeInline> parameter, the component will add <CodeInline>rel</CodeInline> to the rendered button with the value you specified. This overrides the automatic addition of <CodeInline>rel="noopener"</CodeInline> when setting <CodeInline>Target</CodeInline> to <CodeInline>_blank</CodeInline>. If you want to preserve <CodeInline>noopener</CodeInline>, add it manually along with your custom <CodeInline>Rel</CodeInline> value, for example <CodeInline>rel="nofollow noopener"</CodeInline>.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(ButtonNofollowExample)" ShowCode="false">
                        <ButtonNofollowExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
